<template>
  <div class="set">
    <div class="header">
        <div class="header-content">
            <div class="back" @click="back">

            </div>
                个人信息
        </div>
    </div>
    <div class="content">
        <div class="userimg">
            头像
            <div></div>
            <img src="./images/123.png">
            
        </div>
        <div class="username">
            用户名
            <div></div>
            <span style="float:right">{{username}}</span>
        </div>
    </div>
    <div class="logOut" @click="logOut">退出登录</div>
  </div>
</template>

<script>
export default {
    name:'SetUser',
    data() {
        return {
            username:sessionStorage.getItem('username')?sessionStorage.getItem('username'):'未登录',
        }
    },
    methods:{
        logOut(){
            if(confirm('您确定要登出？')){
                sessionStorage.clear();
                this.$router.push('/userLogin');
            }
        },
        back(){
            this.$router.push('/userHome/userInfo');
        }
    }
}
</script>

<style scoped>
    .set{
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
    }
    .header{
        height: 10vh;
        background-color: royalblue;
    }

    .header-content{
        height: 5vh;
        width: 92vw;
        margin-top: 2.5vh;
        overflow: hidden;
        line-height: 5vh;
        text-align: center;
        padding-left: 4vw;
        font-size: 20px;
        color: white;
    }
    

    .back{
        float: left;
        margin-top: 1.5vh;
        height: 2vh;
        width: 2vh;
        border-left: solid 2px white;
        border-bottom: solid 2px white;
        transform: rotate(45deg);
    }

    

    .content{
        display: flex;
        flex-direction: column;
        width: 100%;
        height:80vh;
        background-color: rgba(0, 0, 0, 0.1);
    }

    .userimg{
        height: 7vh;
        width: 100%;
        padding-left: 2vw;
        background-color: #fff;
        line-height: 7vh;
        color: rgba(0, 0, 0, 0.5);
    }

    .userimg img{
        float: right;
        height: 6vh;
        width: 6vh;
        border-radius: 5vh;
        margin-right: 1vw;
        box-shadow: 0 2px 0 1px rgba(0, 0, 0, 0.1);
    }

    .userimg div{
        float: right;
        margin-top: 3vh;
        margin-right: 5vw;
        height: 1vh;
        width: 1vh;
        border-right: solid 2px rgba(0, 0, 0, 0.5);
        border-bottom: solid 2px rgba(0, 0, 0, 0.5);
        transform: rotate(-45deg);
    }

    .username{
        height: 5vh;
        width: 100%;
        padding-left: 2vw;
        margin-top: 1px;
        background-color: #fff;
        line-height: 5vh;
        color: rgba(0, 0, 0, 0.5);
    }

    .username div{
        float: right;
        margin-top: 2vh;
        margin-right: 5vw;
        height: 1vh;
        width: 1vh;
        border-right: solid 2px rgba(0, 0, 0, 0.5);
        border-bottom: solid 2px rgba(0, 0, 0, 0.5);
        transform: rotate(-45deg);
    }

    .logOut{
        height: 10vh;
        width: 100%;
        text-align: center;
        line-height: 10vh;
        background-color: royalblue;
        color: white;
        font-size: 20px;
        letter-spacing: 5px;
    }
</style>